[VueJS] 태그에 백그라운드 이미지 추가하는 방법

VueJS에서 태그 및 컴포넌트 요소에 backgroundImage 인라인 스타일을 사용하여 백그라운드 이미지를 추가하는 방법입니다.

# VueJS 요소 및 컴포넌트에 백그라운드 이미지 적용하기

만약 변수 bgImg이 다음과 같은 값을 가지는 경우라면...

이 값을 아래의 태그 요소에 백그라운드 이미지로 적용해보겠습니다. 이때 인라인 스타일 방식을 사용하였습니다.

이제 div태그에는 백그라운드 이미지가 적용되었습니다. 이 외에 필용한 스타일(크기, 사이즈 방식 등등)은 따로 지정하시면 됩니다. 위에 필요한 속성 등 알아둘 사항은 아래와 같죠.

v-bind:style
backgroundImage

이 두 가지만 잘 기억하면 되겠습니다.

! v-for를 사용하는 경우의 예제보기

만약 v-for가 사용되더라도 크게 달라지는 것 없이 동일하게 적용하여 사용하면됩니다.

변수 mainImgs가 컬렉션 형태의 데이터를 아래와 같이 가지고 있는 경우 이를 사용하여 백그라운드 이미지를 적용해보겠습니다.

아래는 위 변수 값을 태그 및 컴포넌트 요소에 적용된 모습입니다.

이제 v-for가 적용된 각각의 div는 백그라운드가 적용되어 나타나게 됩니다.

! 마치면서

1. 혹시 위와 같이 적용하였음에도 이미지가 안나오는 경우 필요한 css 속성이 적용되었는지 확인하세요.
적용된 div 영역에는 width, height 등의 다른 스타일이 필요할 수 있습니다.

2. img 태그를 사용하지 않나요?
이미지 형태라면 이미지를 사용해도 됩니다. 다만 백그라운드인 경우 해당하는 css 속성의 선택 옵션이 더 다양합니다. background-size를 사용해 cover, contain 등을 지정할 수 있는 것도 편리하죠.